let btn = document.querySelector("button");
let scene1 = document.querySelector(".scene1");
let scene2 = document.querySelector(".scene2");
let scene3 = document.querySelector(".scene3");
let items = document.querySelectorAll(".item");
let con = document.querySelector(".content");
let ele = document.querySelector(".ele");
let date = document.querySelector(".date");
let saiList = ["bubu1.png", "hou1.png", "pi3.png", "sa2.png"];
let score = 0;
let scoreDiv = document.querySelector(".scoreNum");
let infoDiv = document.querySelector(".info");

function init() {
  scene1.style.display = "block";
  scene2.style.display = "block";
  scene3.style.display = "none";
  //   scene1.style.transform = "translateY(550px)";
  //   scene2.style.transform = "translateY(1800px)";
  //   scene3.style.transform = "translateY(1800px)";
  scene1.classList.remove("up");
  scene1.classList.add("down1");
  scene2.classList.remove("up");
  scene2.classList.add("down2");
  scene3.classList.remove("up3");
  scene3.classList.add("down3");
  score = 0;
  infoDiv.style.display = "none";
}

init();

let choose = 0;
btn.addEventListener("click", () => {
  scene1.classList.remove("down1");
  scene2.classList.remove("down2");
  scene1.classList.add("up");
  scene2.classList.add("up2");
  setTimeout(() => {
    scene3.style.display = "block";
    scene1.style.display = "none";
  }, 300);
});

items.forEach((item, idx) => {
  item.addEventListener("click", () => {
    choose = idx;
    scene3.classList.remove("down3");
    scene2.classList.remove("up2");
    scene2.classList.add("up");
    setTimeout(() => {
      scene2.style.display = "none";
    }, 300);
    scene3.classList.add("up3");
    ele.style.backgroundImage = `url('${saiList[choose]}')`;
    let tick = 0;
    let interval = setInterval(() => {
      let min = Math.floor(tick / 60)
        .toString()
        .padStart(2, "0");
      let sec = Math.floor(tick % 60)
        .toString()
        .padStart(2, "0");
      date.textContent = min + ":" + sec;
      tick++;
    }, 1000);
  });
});

ele.addEventListener("click", () => {
  ele.style.transform = "scale(0)";
  addTwo();
  score++;
  console.log(scoreDiv);
  scoreDiv.textContent = score;
});

function addTwo() {
  let newEle1 = document.createElement("div");
  let newEle2 = document.createElement("div");
  newEle1.classList.add("ele");
  newEle2.classList.add("ele");
  let left1 = Math.floor(Math.random() * 1500);
  let left2 = Math.floor(Math.random() * 1500);
  let top1 = Math.floor(Math.random() * 800);
  let top2 = Math.floor(Math.random() * 800);
  let deg1 = Math.floor(Math.random() * 120);
  let deg2 = Math.floor(Math.random() * 120);
  newEle1.style.left = left1 + "px";
  newEle2.style.left = left2 + "px";
  newEle1.style.top = top1 + "px";
  newEle2.style.top = top2 + "px";
  newEle1.style.transform = `rotate(${60 - deg1}deg)`;
  newEle2.style.transform = `rotate(${60 - deg2}deg)`;
  newEle1.style.backgroundImage = `url('${saiList[choose]}')`;
  newEle2.style.backgroundImage = `url('${saiList[choose]}')`;
  console.log(newEle1);
  setTimeout(() => {
    con.appendChild(newEle1);
  }, 300);
  setTimeout(() => {
    con.appendChild(newEle2);
  }, 500);

  newEle1.addEventListener("click", () => {
    // console.log("newEle1");
    newEle1.style.transform += " scale(0)";
    console.log("newEle1");
    addTwo();
    score++;
    scoreDiv.textContent = score;
    if (score > 20) {
      infoDiv.style.display = "block";
    }
  });
  newEle2.addEventListener("click", () => {
    // console.log("click");
    newEle2.style.transform += " scale(0)";
    console.log("newEle1");
    addTwo();
    score++;
    if (score > 20) {
      infoDiv.style.display = "block";
    }
    scoreDiv.textContent = score;
  });
}
